<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >  

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form id="buscar_form" acceptcharset="utf-8"> 
                 <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexProtocolo.xhtml')}" value="Protocolo" update="@form" immediate="true"/> >
                    <p:commandLink   value="Pesquisar por Selo" update="@form" immediate="true"/>
                </div>
                <p:panel header="Pesquisar Servico Protocolo">
                    <p:messages showDetail="true"  id="msg"/> 
                    <h:panelGrid columns="2" id="panel"  styleClass="textAlignRight" columnClasses="textAlignRight"> 
                        <h:outputLabel value="Serie : " />
                        <p:inputText  value="#{managerConsultarProtocoloSelo.selo.serie}" size="30" />
                        <h:outputLabel value="Numero : " />
                        <p:inputText  value="#{managerConsultarProtocoloSelo.numero}" size="10" />
                        <h:outputLabel value="Tipo Selo :"/>
                        <p:autoComplete id="tipoSelo" panelStyle="width:250px !important;" effect="blind"  value="#{managerConsultarProtocoloSelo.selo.tipoSelo}" completeMethod="#{managerTipoSelo.completeTipoSelo}"  
                                        var="p" itemLabel="#{p.nome}" itemValue="#{p}" converter="tipoSeloConverter" forceSelection="true" converterMessage="Erro, verifique o Tipo Selo" minQueryLength="3" dropdown="true"> 
                            <p:ajax event="itemSelect" listener="#{managerConsultarProtocoloSelo.handleSelectTipoSelo}"/>
                            <p:column>  
                                <table >
                                    <tr  style="height:20px; background-color: \##{p.corSelo.cor};">
                                        <td style="width: 20px;"></td>
                                    </tr>
                                </table>
                            </p:column>
                            <p:column>  
                                #{p.nome}
                            </p:column>  
                        </p:autoComplete>
                    </h:panelGrid>
                    <center>
                        <p:commandButton value="Buscar" actionListener="#{managerConsultarProtocoloSelo.pesquisar()}"  update="proTable" icon="ui-icon-search"/>
                        <p:commandButton value="Voltar" actionListener="#{managerConsultarProtocoloSelo.redirect('indexSelo.xhtml')}" icon="ui-icon-arrowreturnthick-1-w" immediate="true" />
                    </center>
                    <br/>
                    <br/>
                    <p:dataTable id="proTable" var="pro" value="#{managerConsultarProtocoloSelo.lstProtocolo}" 
                                 paginator="true" rows="5"
                                 paginatorPosition="bottom"
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                                 rowsPerPageTemplate="5,10,15">     
                        <f:facet name="header">  
                            Protocolo
                        </f:facet>
                        <p:column style="width:4%">  
                            <p:rowToggler />  
                        </p:column>  
                        <p:column  style="width:50px;">  
                            <f:facet name="header" >   
                                Nº Protocolo
                            </f:facet>  
                            <h:outputText value="#{pro.id}"  style="font-weight: bold;"/>  
                        </p:column>
                        <p:column  style="width:200px;">  
                            <f:facet name="header" >   
                                Cliente
                            </f:facet>  
                            <h:outputText value="#{pro.cliente.nome}"  style="font-weight: bold;"/>  
                        </p:column>
                        <p:column  style="width:50px;">  
                            <f:facet name="header" >   
                                Data 
                            </f:facet>  
                            <h:outputText value="#{pro.dataCad}" style="font-weight: bold;">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:outputText>  
                        </p:column>
                        <p:column  style="width:60px;">  
                            <f:facet name="header" >   
                                Forma/Pagamento
                            </f:facet>  
                            <h:outputText value="#{pro.formasPagamento.nome}"  style="font-weight: bold;"/>  
                        </p:column>
                        <p:column  style="width:50px;">  
                            <f:facet name="header" >   
                                Valor Cartório
                            </f:facet>  
                            <h:outputText value="#{pro.valorTotalCartorio}"  style="font-weight: bold; float: right"/>  
                        </p:column>
                        <p:column  style="width:50px;">  
                            <f:facet name="header" >   
                                Valor FermoJupi 
                            </f:facet>  
                            <h:outputText value="#{pro.valorTotalFermojupi}"  style="font-weight: bold; float: right"/>  
                        </p:column>
                        <p:rowExpansion>  
                            <table style="width:100%">
                                <tbody style="background-color: #5277A9; color: #ffffff; ">
                                    <td style="font-weight: bold;">
                                        Ato 
                                    </td>
                                    <td style="font-weight: bold;">
                                        Valor Cartório
                                    </td>
                                    <td style="font-weight: bold; text-align: center;">
                                        Valor FermoJupi
                                    </td>
                                    <td style="font-weight: bold; text-align: center;">
                                        Valor
                                    </td>

                                </tbody>
                                <ui:repeat value="#{pro.servicoProtocolos}" var="servico">
                                    <tr>
                                        <td >
                                            <h:outputText value="#{servico.atoItem.descricao}" style="float:right;"/>  
                                        </td>
                                        <td >
                                            <h:outputText value="#{servico.valorCartorio eq null ? '-': servico.valorCartorio}" style="float:right;"/>  
                                        </td>
                                        <td >
                                            <h:outputText value="R$ #{servico.valorFermojupi eq null ? '-': servico.valorFermojupi}" style="float:right;"/>  
                                        </td>
                                        <td>
                                            <h:outputText value="R$ #{servico.valor eq null ? '-': servico.valor}" style="float:right;"/>  
                                        </td>

                                    </tr>
                                </ui:repeat>
                            </table>
                        </p:rowExpansion>


                    </p:dataTable>  
                </p:panel>
                <center>
                    <!--                    <p:commandButton id="cancelar" icon="ui-icon-arrowreturnthick-1-w" value="Cancelar" actionListener="{managerVisualizarAtoTipo.redirect('indexAtoTipo.xhtml')}" immediate="true" />-->
                </center>    
            </h:form>
        </ui:define>
    </ui:composition>
</html>